<extend name="Layout/application"/>

<block name="content">
   <section class="content-header">
      <h1>
         客资列表
         <small>Customer index</small>
      </h1>
      <ol class="breadcrumb">
         <li><a href="#"><i class="fa fa-dashboard"></i> Customer</a></li>
         <li class="active">Index</li>
      </ol>
   </section>

   <section class="content" style="overflow-x: auto;">

      <include file="Layout/_flash"/>

      <div class="row">
         <div class="col-md-12">
            <div class="box box-primary">
               <div class="box-header">
                  <div class="col-md-5">
                     <a href="javascript:;" class="btn btn-primary btn-refresh" title="刷新"><i
                          class="fa fa-refresh"></i></a>
                     <a href="/admin/customers/create" class="btn btn-success btn-add" title="添加"><i
                          class="fa fa-plus"></i>
                        添加</a>
                     <a href="javascript:;" class="btn btn-danger btn-del delete_all" title="删除"><i
                          class="fa fa-trash"></i> 删除</a>
                     <a href="/admin/customers/export_customer" class="btn btn-primary btn-add" title="导出"><i
                          class="fa fa-sign-in"></i>
                        导出</a>
                  </div>

                  <!--搜索-->
                  <form action="" method="get">

                     <!--日期选择-->
                     <div class="col-md-4">
                        <div class="input-group input-group-sm" style="width: 280px;margin-top: 10px;">
                           <div class="input-group-btn">
                              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                 <span class="field">{{$fileDate|default='录入时间'}}</span>
                                 <i class="fa fa-caret-down"></i></button>
                              <input type="hidden" class="search_field" name="search_field"
                                     value="create_at">
                              <ul class="dropdown-menu search-ul">
                                 <li><a href="javascript:;" data-field="create_at">录入时间</a></li>
                                 <li><a href="javascript:;" data-field="wedding_day">婚期</a></li>
                              </ul>
                           </div>
                           <input type="text" name="date" value="{{$Request.param.date}}"
                                  class="form-control date">
                           <div class="input-group-btn">
                              <button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
                              </button>
                           </div>
                        </div>
                     </div>
                  </form>

                  <form action="" method="get">
                     <!--输入框搜索-->
                     <div class="col-md-3">
                        <div class="input-group input-group-sm" style="width:280px;margin-top: 10px;">
                           <div class="input-group-btn">
                              <button type="button" class="btn btn-default dropdown-toggle search-drop-btn"
                                      data-toggle="dropdown" aria-expanded="false">
                                 <span class="field">{{$fieldName|default='姓名'}}</span>
                                 <i class="fa fa-caret-down"></i>
                              </button>
                              <input type="hidden" class="search_field" name="search_field"
                                     value="name">
                              <ul class="dropdown-menu search-ul">
                                 <li><a href="javascript:void(0)" data-field="id">ID</a></li>
                                 <li><a href="javascript:void(0)" data-field="name">姓名</a></li>
                                 <li><a href="javascript:void(0)" data-field="name1">姓名1</a></li>
                                 <li><a href="javascript:void(0)" data-field="phone">电话</a></li>
                                 <li><a href="javascript:void(0)" data-field="phone1">电话1</a></li>
                                 <li><a href="javascript:void(0)" data-field="wx">微信</a></li>
                                 <li><a href="javascript:void(0)" data-field="qq">QQ</a></li>
                                 <li><a href="javascript:void(0)" data-field="kefu">客服</a></li>
                              </ul>
                           </div>
                           <input type="text" name="title" class="form-control pull-right"
                                  value="{{$Request.param.title}}" placeholder=""/>
                           <div class="input-group-btn">
                              <button type="submit" class="btn btn-default"><i class="fa fa-search"></i>
                              </button>
                           </div>
                        </div>
                     </div>

                  </form>
               </div>

               <!-- /.box-header -->
               <div class="box-body">
                  <table id="example2" class="table table-bordered table-hover">
                     <thead>
                     <tr>
                        <th>
                           <input type="checkbox" class="check_all">
                        </th>
                        <th>ID <a href="" class="fa fa-sort"></a></th>
                        <th>录入时间 <a href="" class="fa fa-sort"></a></th>
                        <th>姓名</th>
                        <th>婚期</th>
                        <th>电话</th>
                        <th>姓名1</th>
                        <th>电话1</th>
                        <th>微信</th>
                        <th>QQ</th>
                        <th>
                           <div class="btn-group">
                              <button type="button" class="dropdown-toggle" data-toggle="dropdown">
                                 {{$areas[$area_id-1]['name']|default='地域'}}<span class="caret"></span>
                              </button>
                              <ul class="dropdown-menu area">
                                 <volist name="areas" id="area">
                                    <li>
                                       <a href="/admin/customers/index?area_id={{$area.id}}">{{$area.name}}</a>
                                    </li>
                                 </volist>
                              </ul>
                           </div>
                        </th>
                        <th>备注</th>
                        <th>客服</th>
                        <th>来源
                           <button type="button" data-toggle="modal" data-target="#laiyuan">搜索</button>
                        </th>
                        <th>渠道确认
                           <div class="btn-group">
                              <button type="button" class="dropdown-toggle" data-toggle="dropdown">
                                 <span class="caret"></span>
                              </button>
                              <ul class="dropdown-menu">
                                 <li><a href="">全部</a></li>
                                 <volist name="qurens" id="quren">
                                    <li><a href="/admin/customers/index?quren={{$key}}">{{$quren}}</a></li>
                                 </volist>
                              </ul>
                           </div>
                        </th>
                        <th>网销
                           <button type="button" data-toggle="modal" data-target="#wang">搜索</button>
                        </th>
                        <th>类型
                           <button type="button" data-toggle="modal" data-target="#type">搜索</button>
                        </th>
                        <th>
                           <div class="btn-group">
                              <button type="button" class="dropdown-toggle" data-toggle="dropdown">
                                 客户需求<span class="caret"></span>
                              </button>
                              <ul class="dropdown-menu">
                                 <li><a href="">全部</a></li>
                                 <volist name="styles" id="style">
                                    <li><a href="/admin/customers/index?style={{$key}}">{{$style}}</a></li>
                                 </volist>
                              </ul>
                           </div>
                        </th>
                        <!--<th>电话</th>-->
                        <!--<th>紧急-->
                        <!--<div class="btn-group">-->
                        <!--<button type="button" class="dropdown-toggle" data-toggle="dropdown">-->
                        <!--<span class="caret"></span>-->
                        <!--</button>-->
                        <!--<ul class="dropdown-menu">-->
                        <!--<li><a href="">全部</a></li>-->
                        <!--<volist name="urgents" id="urgent">-->
                        <!--<li><a href="#">{{$urgent}}</a></li>-->
                        <!--</volist>-->
                        <!--</ul>-->
                        <!--</div>-->
                        <!--</th>-->
                     </tr>
                     </thead>
                     <tbody>

                     <volist name="customers" id="customer">

                        <tr data-id="{{$customer.id}}">
                           <td>
                              <input type="checkbox" class="checked_id" name="check_id[]" value="{{$customer.id}}">
                           </td>
                           <td title="日志">
                              <button type="button" data-toggle="modal" class="log" data-target="#log">
                                 {{$customer.id}}
                              </button>
                           </td>
                           <td title="{{$customer.create_at}}">{{$customer.create_at|date='Y-m-d'}}</td>
                           <td>
                              <input type="text" class="name edit" name="name" value="{{$customer.name}}"
                                     title="{{$customer.name}}">
                           </td>
                           <td>
                              <input type="text" class="phone edit wedding_day" name="wedding_day" id="{{$customer.id}}"
                                     value="{{$customer.wedding_day|date='Y-m-d'}}" title="{{$customer.wedding_day}}">
                           </td>
                           <td>
                              <input type="text" class="phone edit" name="phone" value="{{$customer.phone}}"
                                     maxlength="11">
                           </td>
                           <td>
                              <input type="text" class="name edit" name="name1" value="{{$customer.name1}}">
                           </td>
                           <td>
                              <input type="text" class="phone edit" name="phone1" value="{{$customer.phone1}}"
                                     maxlength="11">
                           </td>
                           <td>
                              <input type="text" class="phone edit" name="wx" value="{{$customer.wx}}">
                           </td>
                           <td>
                              <input type="text" class="phone edit" name="qq" value="{{$customer.qq}}">
                           </td>
                           <td>
                              <div class="btn-group">
                                 <button type="button" class="dropdown-toggle" data-toggle="dropdown">
                                    {{$customer.area.name|default='未选择'}}<span class="caret"></span>
                                 </button>
                                 <ul class="dropdown-menu area">
                                    <volist name="areas" id="area">
                                       <li><a href="javascript:;" class="update" data-name="area_id"
                                              data-value="{{$area.id}}">{{$area.name}}</a></li>
                                    </volist>
                                 </ul>
                              </div>
                           </td>
                           <td>
                              <button data-toggle="modal" data-target="#mark" class="beizhu"
                                      data-value="{{$customer.mark}}">
                                 <if $customer.mark>
                                    <i class="fa fa-eye"></i>
                                    <else/>
                                    <i class="fa fa-eye-slash"></i>
                                 </if>
                              </button>
                           </td>
                           <td>{{$customer.kefu}}</td>
                           <td>{{$customer.qudao.name}}</td>
                           <td>
                              <div class="btn-group">
                                 <button type="button" class="dropdown-toggle" data-toggle="dropdown">
                                    {{$qurens[$customer.quren]|default='未选择'}}<span class="caret"></span>
                                 </button>
                                 <ul class="dropdown-menu">
                                    <volist name="qurens" id="quren">
                                       <li><a href="javascript:;" class="update" data-name="quren"
                                              data-value="{{$key}}">{{$quren}}</a></li>
                                    </volist>
                                 </ul>
                              </div>
                           </td>
                           <td>
                              <if $customer.wang>
                                 <div class="btn-group">
                                    <button type="button" class="dropdown-toggle" data-toggle="dropdown">
                                       {{$customer.wang}}<span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                       <volist name="wangs" id="wang">
                                          <volist name="wang.admins" id="admin">
                                             <li><a href="javascript:;" class="update" data-name="wang"
                                                    data-value="{{$admin.name}}">{{$admin.name}} | {{$wang.name}}</a>
                                             </li>
                                          </volist>
                                       </volist>
                                    </ul>
                                 </div>
                                 <else/>
                                 <div class="btn-group">
                                    <button type="button" class="dropdown-toggle  btn-warning" data-toggle="dropdown">
                                       {{$customer.wang|default='未分配'}}<span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                       <volist name="wangs" id="wang">
                                          <volist name="wang.admins" id="admin">
                                             <li><a href="javascript:;" class="update" data-name="wang"
                                                    data-value="{{$admin.name}}">{{$admin.name}} | {{$wang.name}}</a>
                                             </li>
                                          </volist>
                                       </volist>
                                    </ul>
                                 </div>
                              </if>
                           </td>
                           <td>
                              <div class="btn-group">
                                 <button type="button" class="dropdown-toggle" data-toggle="dropdown">
                                    {{$types[$customer.type]|default='未选择'}}<span class="caret"></span>
                                 </button>
                                 <ul class="dropdown-menu">
                                    <volist name="types" id="type">
                                       <li><a href="javascript:;" class="update" data-name="type"
                                              data-value="{{$key}}">{{$type}}</a></li>
                                    </volist>
                                 </ul>
                              </div>
                           </td>
                           <td>
                              <div class="btn-group">
                                 <button type="button" class="dropdown-toggle" data-toggle="dropdown">
                                    {{$styles[$customer.style]|default='未选择'}}<span class="caret"></span>
                                 </button>
                                 <ul class="dropdown-menu">
                                    <volist name="styles" id="style">
                                       <li><a href="javascript:;" class="update" data-name="style"
                                              data-value="{{$key}}">{{$style}}</a></li>
                                    </volist>
                                 </ul>
                              </div>
                           </td>
                           <!--<td>{{:is_something($customer,'is_phone')}}</td>-->
                           <!--<td>{{:is_something($customer,'is_urgent')}}</td>-->
                        </tr>
                     </volist>

                     </tbody>
                  </table>

                  <div class="box-footer">
                     共 {{$customers->total()}} 条数据
                     <div class="page">
                        {{$customers->render()|raw}}
                     </div>
                  </div>
               </div>
               <!-- /.box-body -->
            </div>
         </div>
         <!-- /.box -->
      </div>
      <!-- /.col -->
   </section>

   <!--备注日志-->
   <div class="modal fade" id="log">
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span></button>
               <h4 class="modal-title">日志</h4>
            </div>

            <div class="modal-body">
               <p class="customerLog"></p>
               <!--<textarea name="" class="form-control" placeholder="请输入内容"></textarea>-->
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
               <!--<button type="button" class="btn btn-primary">提交</button>-->
            </div>
         </div>
      </div>
   </div>

   <form action="" method="get">
      <!--来源搜索-->
      <div class="modal fade" id="laiyuan">
         <div class="modal-dialog">
            <div class="modal-content">
               <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title">来源搜索</h4>
               </div>
               <div class="modal-body">
                  <volist name="qudaos" id="qudao">
                     <input type="checkbox" name="qudao_id[]" value="{{$qudao.id}}"> {{$qudao.name}}
                  </volist>
               </div>
               <div class="modal-footer">
                  <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
                  <button type="submit" class="btn btn-primary">提交</button>
               </div>
            </div>
         </div>
      </div>

      <!--网销搜索-->
      <div class="modal fade" id="wang">
         <div class="modal-dialog">
            <div class="modal-content">
               <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title">网销搜索</h4>
               </div>
               <div class="modal-body">
                  <volist name="wangs" id="wang">
                     <volist name="wang.admins" id="admin">
                        <input type="checkbox" name="wang[]" value="{{$admin.name}}"> {{$admin.name}}
                     </volist>
                  </volist>
               </div>
               <div class="modal-footer">
                  <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
                  <button type="submit" class="btn btn-primary">提交</button>
               </div>
            </div>
         </div>
      </div>

      <!--客资类型搜索-->
      <div class="modal fade" id="type">
         <div class="modal-dialog">
            <div class="modal-content">
               <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title">客资类型搜索</h4>
               </div>
               <div class="modal-body">
                  <volist name="types" id="type">
                     <input type="checkbox" name="type[]" value="{{$key}}"> {{$type}}
                  </volist>
               </div>
               <div class="modal-footer">
                  <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
                  <button type="submit" class="btn btn-primary">提交</button>
               </div>
            </div>
         </div>
      </div>
   </form>

   <!--备注查看-->
   <div class="modal fade" id="mark">
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span></button>
               <h4 class="modal-title">备注</h4>
            </div>
            <div class="modal-body">
               <input type="hidden" id="mark_id">

               <textarea name="mark" id="beizhu" cols="15" rows="5" class="form-control"
                         placeholder="请输入备注"></textarea>

            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
               <button type="button" class="btn btn-primary submit">提交</button>
            </div>
         </div>
      </div>
   </div>

</block>


<block name="js">
   <script>
      $(function () {
         // 搜索
         //日期范围选择
         lay('.date').each(function () {
            laydate.render({
               elem: this,
               range: '~',
               done: function (val) {
                  // $(this).val(val);
               }
            });
         });
         // 搜索框
         $('body').on("click", '.search-ul li a', function (event) {
            var _this = $(this);
            var _field = _this.data('field');
            var _html = _this.html();
            var _box = _this.closest('.input-group-btn');
            _box.find('.search_field').val(_field);
            _box.next('input').attr('placeholder', _html);
            _box.find('.field').html(_html);
         });

         //刷新
         $('.btn-refresh').click(function () {
            window.location.reload();
         });

         // //上面选中，下面也选中
         // $('.check_all').click(function () {
         //    var checked = $(this).prop('checked');
         //    $('.checked_id').prop('checked', checked).parents('tr').toggleClass('selected');
         // });
         // //下面全选，上面也选中
         // $('.checked_id').click(function () {
         //    $(this).parents('tr').toggleClass('selected');
         //    var all_length = $('.checked_id').length;
         //    var check_length = $('.checked_id:checked').length;
         //    if (all_length == check_length) {
         //       $('.check_all').prop('checked', true);
         //    } else {
         //       $('.check_all').prop('checked', false);
         //    }
         // });

         // 全选，反选
         $('.check_all').click(function () {
            $('.checked_id').each(function () {
               if (this.checked) {
                  this.checked = false;
               } else {
                  this.checked = true;
               }
            })
         });

         //多选删除
         $('.delete_all').click(function () {
            var check_length = $('.checked_id:checked').length;
            if (check_length == 0) {
               layer.msg('请你至少选中一条', {icon: 2, offset: 't'});
               return false;
            }

            layer.confirm('确认删除选中的 ' + check_length + ' 条吗? 并同时删除客资追踪和客资订单?',
               {icon: 3, title: '提示', offset: 't'},
               function (index) {
                  layer.close(index);

                  $.ajax({
                     type: 'DELETE',
                     url: '/admin/customers/delete_all',
                     data: $('.checked_id:checked').serialize(),
                     success: function (data) {
                        //判断有没有权限
                        if (data && data.status == 0) {
                           layer.msg(data.msg, {
                              icon: 5,
                              time: 2000, //2秒关闭（如果不配置，默认是3秒）
                              offset: 't'
                           });
                           return false;
                        } else {
                           $('.checked_id:checked').parents('tr').fadeOut(400);
                        }
                     }
                  });
               });
            return false;
         });

         //查看日志
         $('.log').click(function () {
            var log_id = $(this).parents('tr').data('id');
            $.ajax({
               url: "{{:url('customers/showLog')}}",
               data: {log_id: log_id},
               type: 'POST',
               dataType: 'json',
               success: function (data) {
                  //判断有没有权限
                  if (data && data.status == 0) {
                     layer.msg(data.msg, {
                        icon: 5,
                        time: 2000, //2秒关闭（如果不配置，默认是3秒）
                        offset: 't'
                     });
                     return false;
                  } else {
                     var str = "";
                     $.each(data, function (i, item) {
                        str += '<p>' + '[' + item.create_at + ']' + item.log + '</p>';
                     });
                     $(".customerLog").html(str);
                     return false;
                  }
               }
            });
         });

         //编辑婚期
         lay('.wedding_day').each(function () {
            laydate.render({
               elem: this, //指定元素
               type: 'date',
               done: function (value) {
                  // console.log(value); //得到日期生成的值，如：2017-08-18
                  var info = {
                     id: this.elem.attr('id'),
                     name: this.elem.attr('name'),
                     val: value
                  };

                  edit_customer(info);
                  return false;
               }
            });
         });

         //编辑信息
         $('.edit').change(function () {
            var info = {
               id: $(this).parents('tr').data('id'),
               val: $(this).val(),
               name: $(this).attr('name'),
            };

            edit_customer(info);
            return false;
         });

         //编辑其他信息
         $('.update').click(function () {
            var info = {
               id: $(this).parents('tr').data('id'),
               val: $(this).data('value'),
               name: $(this).data('name'),
            };

            edit_customer(info);
            return false;
         });

         //备注信息
         $('.beizhu').click(function () {
            var id = $(this).parents('tr').data('id');
            var val = $(this).data('value');
            $('#mark_id').val(id);
            $('#beizhu').val(val);
         });
         //更新备注消息
         $('.submit').click(function () {
            var info = {
               id: $('#mark_id').val(),
               name: $('#beizhu').attr('name'),
               val: $('#beizhu').val()
            };

            edit_customer(info);
            return false;
         });

         //更新信息
         function edit_customer(info) {
            layer.confirm('确认更新信息吗?',
               {icon: 3, title: '提示', offset: 't'},
               function (index) {
                  layer.close(index);

                  $.ajax({
                     url: "{{:url('customers/edit_customer')}}",
                     data: info,
                     type: 'POST',
                     success: function (data) {
                        //判断有没有权限
                        if (data && data.status == 0) {
                           layer.msg(data.msg, {
                              icon: 5,
                              time: 2000, //2秒关闭（如果不配置，默认是3秒）
                              offset: 't'
                           });
                           return false;
                        } else {
                           window.location.reload();
                        }
                     }
                  });
               });
         }
      })
   </script>
</block>



